/**
 * 最新专题
 * **/
import './index.scss'
import { getSubject } from '../../api/home'
import { useEffect, useState } from 'react'
import { RightOutlined,EyeOutlined ,HeartOutlined,ProfileOutlined } from '@ant-design/icons'
import LazyLoad from '../LazyLoad'
import Skeleton from '../Skeleton'
export default () => {
    /**
   * 初始面板
   * **/
    const defaultList = (
        <>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
        </>
    )
    /**
     * 商品列表
     * **/
    const [list, setList] = useState([])
    /**
     * 获取商品
     * **/
    const getList = async () => {
        try {
            const data = await getSubject()
            setList(data)
        } catch (error) { }
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div className="subject">
            <div className="top">
                <div className="left">
                    <h1>最新专题</h1>
                </div>
                <span>查看全部&emsp;<RightOutlined /></span>
            </div>
            <LazyLoad load={getList}>
                <ul>
                    {
                        list.length ? list.map(item => (
                            <li>
                                <img src={item.detailsUrl} alt="" />
                                <div className="info">
                                    <div className="info-left">
                                        <p>{item.title}</p>
                                        <p className='summary'>{item.summary}</p>
                                    </div>
                                    <div className="info-right">
                                        <span className='price'>￥{item.lowestPrice}起</span>
                                    </div>
                                </div>
                                <div className="icon">
                                    <div className="icon-left">
                                      <small><HeartOutlined/>{item.collectNum}</small>
                                      <small><EyeOutlined/>{item.viewNum}</small>  
                                    </div>
                                    <div className="icon-right">
                                  <small>  <ProfileOutlined /> {item.replyNum}</small>
                                    </div>
                                </div>
                            </li>

                        )) : defaultList
                    }

                </ul>
            </LazyLoad>
        </div>
    )
}